<template>
    <view class="app-section">
        <view class="section-header" @click="onClick">
            <view class="section-header-decoration" v-if="props.type" :class="props.type" />
            <slot v-else name="decoration"></slot>

            <view class="section-header-content">
                <text :style="{'font-size':props.titleFontSize,'color':props.titleColor}" class="section-content-title"
                    :class="{'distraction':!props.subTitle}">{{ props.title }}</text>
                <text v-if="props.subTitle" :style="{'font-size':props.subTitleFontSize,'color':props.subTitleColor}"
                    class="section-header-content-sub">{{ props.subTitle }}</text>
            </view>

            <view class="section-header-slot-right">
                <slot name="right"></slot>
            </view>
        </view>

        <view class="section-content" :style="{padding: props.padding}">
            <slot></slot>
        </view>
    </view>
</template>

<script setup lang='ts' name="AppSection">
/**
 * Section 标题栏
 * @description 标题栏
 * @property {String} type = [line|circle|square] 标题装饰类型
 * 	@value line 竖线
 * 	@value circle 圆形
 * 	@value square 正方形
 * @property {String} title 主标题
 * @property {String} titleFontSize 主标题字体大小
 * @property {String} titleColor 主标题字体颜色
 * @property {String} subTitle 副标题
 * @property {String} subTitleFontSize 副标题字体大小
 * @property {String} subTitleColor 副标题字体颜色
 * @property {String} padding 默认插槽 padding
 */

export interface AppSectionProps {
    /**标题装饰样式 [*竖线 | 圆形 | 正方形] */
    type?: 'line' | 'circle' | 'square'
    /**标题 */
    title: string
    /**标题字号大小 */
    titleFontSize?: string
    /**标题字体颜色 */
    titleColor?: string
    /**副标题 */
    subTitle?: string
    /**副标题字号大小 */
    subTitleFontSize?: string
    /**副标题字体颜色 */
    subTitleColor?: string
    /**插槽内的padding大小 */
    padding?: string
}
export interface AppSectionEmits {
    (e: 'click'): void
}

const props = withDefaults(defineProps<AppSectionProps>(), {
    type: 'line',
    titleFontSize: '28px',
    titleColor: '#333',
    subTitle: '',
    subTitleFontSize: '24rpx',
    subTitleColor: '#999',
    padding: '20rpx'
})
const emit = defineEmits<AppSectionEmits>()

const onClick = () => {
    emit('click')
}
</script>

<style scoped lang="scss">
$primary: #2979ff !default;

.app-section {
    background-color: #fff;

    .section-header {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12px 10px;
        font-weight: normal;

        &-decoration {
            margin-right: 6px;
            background-color: $primary;

            &.line {
                width: 4px;
                height: 12px;
                border-radius: 10px;
            }

            &.circle {
                width: 8px;
                height: 8px;
                border-top-right-radius: 50px;
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                border-bottom-right-radius: 50px;
            }

            &.square {
                width: 8px;
                height: 8px;
            }
        }

        &-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            color: #333;

            .distraction {
                flex-direction: row;
                align-items: center;
            }

            &-sub {
                margin-top: 2px;
            }
        }

        &-slot-right {
            font-size: 14px;
        }
    }

    .section-content {
        font-size: 14px;
    }
}
</style>